<template>
  <footer class="footer">
    <div class="content" @click="showCarFn">
      <div class="car">
        <div class="car_bg">
          <van-icon name="shopping-cart" />
        </div>
      </div>
      <div class="price">
        <p class="total">￥{{ total.price }}</p>
        <p class="fee">配送费￥{{ total.packing_fee }}</p>
      </div>
    </div>
    <van-button type="primary">去结算</van-button>
  </footer>
</template>

<script>
export default {
  props: ["total"],
  methods: {
    showCarFn() {
      this.$emit("showCarFn");
    },
  },
};
</script>

<style lang="less" scoped>
footer {
  position: fixed;
  bottom: -1px;
  z-index: 1;
  height: 44px;
  width: 100%;
  background-color: #3d3d3f;
  margin: 0 !important;
  color: #fff;
  .content {
    display: flex;
    width: 73%;
    .car {
      position: relative;
      flex: 1;
      .car_bg {
        position: absolute;
        top: -20px;
        left: 12px;
        background-color: #3190e8;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 4px solid #3d3d3f;
        .van-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 28px;
          transform: translate(-50%, -50%);
        }
      }
    }
    .price {
      flex: 3;
      line-height: 20px;
      padding-left: 10px;
      .total {
        font-weight: 700;
      }
      .fee {
        font-size: 12px;
      }
    }
  }
  .van-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    color: #fff;
    background-color: #4cd964;
    font-weight: 700;
  }
}
</style>